<template>
    <div>
        <h3 style="text-align: center">订单详情</h3>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="订单创建时间"/>
            <van-grid-item :text="order.createTime"/>
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="订单编号"/>
            <van-grid-item :text="order.orderNo"/>
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="订单状态"/>
            <van-grid-item :text="order.orderStatusName"/>
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="订单支付方式"/>
            <van-grid-item :text="order.paymentType==1?'在线支付':'其他'"/>
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="收货人"/>
            <van-grid-item :text="order.receiverName"/>
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="收货地址"/>
            <van-grid-item :text="order.receiverAddress"/>
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="收货人电话"/>
            <van-grid-item :text="order.receiverMobile"/>
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item text="总价"/>
            <van-grid-item :text="order.totalPrice/100 + ''"/>
        </van-grid>
        <van-card v-for="item in order.orderItemVOList" :key="item.orderNo"
                  :num="item.quantity"
                  :price="item.unitPrice/100"
                  :desc="item.productName"
                  :title="item.productName"
                  :thumb="item.productImg"
        />
        <van-grid direction="horizontal" :column-num="1">
            <van-grid-item>
                <van-button type="primary" @click="cancel" block>取消订单</van-button>
            </van-grid-item>
        </van-grid>
        <van-grid direction="horizontal" :column-num="1">
            <van-grid-item>
                <van-button type="primary" block @click="toOrderPay">去支付</van-button>
            </van-grid-item>
        </van-grid>
        <van-grid direction="horizontal" :column-num="1">
            <van-grid-item>
                <van-button type="primary" @click="toCompile" block>确认收货</van-button>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script>
    import {orderDetial, cancelOrder,finish} from "../../utils/apis";
    import {Toast} from "vant";

    export default {
        name: "OrderDetail",
        data() {
            return {
                order: {},
                orderNo: ''
            }
        },
        created() {
            this.getOrderDetail()
        },
        methods: {
            cancel() {
                cancelOrder({
                    orderNo: this.orderNo
                }).then(res => {
                    console.log(res)
                    if (res.status === 10000)
                        this.$router.push("/")
                })
            }
            ,
            getOrderDetail() {
                console.log(this.$route)
                this.orderNo = this.$route.query.orderNo
                orderDetial({
                    orderNo: this.orderNo
                }).then(res => {
                    this.order = res.data
                    console.log(res)
                })
            },
            toOrderPay() {
                this.$router.push({name: "Pay", query: {orderNo: this.$route.query.orderNo}})
            },
            toCompile(){
                finish({
                    orderNo:this.orderNo
                }).then(res => {
                    if (res.status === 10000){
                        Toast("确认收货完成")
                        this.getOrderDetail()
                    }else {
                        Toast(res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
